<template>
    <div class="app-container">
        <div v-if="environmentOpen">
            <el-divider content-position="center">离线分析-环境因子</el-divider>
            <el-form ref="environmentRef" :model="form" :rules="rules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="20" :xs="24">
                        <el-form-item label="" prop="misfirePolicy">
                            <el-radio-group v-model="queryParams.environmentNumber">
                                <el-radio v-for="(item, index) in environmentList" class="radio"
                                    :label="item.environmentNumber" border>
                                    {{ item.environmentName }}</el-radio>

                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Bottom"
                            @click="environmentBottom">下一步</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div v-if="runmodelOpen">
            <el-divider content-position="center">离线分析-运行模式选定</el-divider>
            <el-row :gutter="20">
                <el-col :span="14" :xs="24">
                    <el-form-item label="" prop="misfirePolicy">
                        <el-radio-group v-model="runmodelNumber" style="width: 100%;">
                            <el-radio style="width: 100%;" :disabled="lock" v-for="(item, index) in runmodelList"
                                class="radio" :label="item.runmodelNumber" border>
                                {{ item.runmodelName }}</el-radio>

                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Bottom"
                        @click="runmodelBottom">下一步</el-button>
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Top"
                        @click="runmodelTop">上一步</el-button>
                </el-col>
            </el-row>
        </div>


        <div v-if="systemOpen">
            <el-divider content-position="center">离线分析-设备切换</el-divider>
            <el-table :data="systemList" row-key="id">
                <el-table-column align="center" type="expand">
                    <template #default="scopes">
                        <el-table :data="scopes.row.systemList" hide-headers class="hide-table-header" row-key="id">
                            <el-table-column label="列状态" align="center" prop="realname">
                                <template #default="scopes">
                                    <el-select v-model="scopes.row.isRunning" @change="getXd(scopes.row)" class="m-2"
                                        placeholder="Select" size="small">
                                        <el-option
                                            v-for="item in [{ label: '备用', value: '0' }, { label: '运行', value: '1' }]"
                                            :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作时间" align="center" prop="create_time">
                                <template #default="scopes">
                                    <el-date-picker required @change="getXd(scopes.row)"
                                        v-model="scopes.row.operateTime" type="datetime"></el-date-picker>
                                </template>
                            </el-table-column>
                            <el-table-column label="运行备用列" align="center" prop="standbycolumnName" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="列状态" align="left" prop="groupName">
                    <template #default="scopes">
                        <span style="color: #409EFF">{{ scopes.row.groupName }}({{ scopes.row.cnt }}列)</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作时间" align="center" prop="create_time" />
                <el-table-column label="运行备用列" align="center" prop="create_time" />
            </el-table>
            <el-row :gutter="20">
                <el-col :span="12" :xs="24">
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Bottom"
                        @click="systemBottom">下一步</el-button>
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Top"
                        @click="systemTop">上一步</el-button>
                </el-col>
            </el-row>
        </div>

        <div v-if="componentOpen">
            <el-divider content-position="center">离线分析-设备停复役</el-divider>
            <el-table v-loading="loading" :data="xztList">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="编号" prop="id" width="220" />
                <el-table-column label="设备名称" prop="componentName" min-width="420" />
                <el-table-column label="设备编码" prop="componentNumber" width="420" />

            </el-table>
            <el-divider content-position="left">设备查询</el-divider>
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
                <el-form-item label="设备查询" prop="componentNumber">
                    <el-input v-model="queryParams.componentNumber" placeholder="请输入设备编码" clearable style="width: 240px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格数据 -->
            <el-table v-loading="loading" :data="componentList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="编号" prop="id" width="220" />
                <el-table-column label="设备名称" prop="componentName" min-width="420" />
                <el-table-column label="设备编码" prop="componentNumber" width="420" />
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />

            <el-row :gutter="20">
                <el-col :span="12" :xs="24">
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Bottom"
                        @click="componentBottom">下一步</el-button>
                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Top"
                        @click="componentTop">上一步</el-button>
                </el-col>
            </el-row>
        </div>

        <div v-if="offlineOpen">
            <el-divider content-position="center">离线分析-割集发或重解法</el-divider>
            <el-form ref="environmentRef" :model="form" :rules="rules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="20" :xs="24">
                        <el-form-item label="" prop="misfirePolicy">
                            <el-radio-group v-model="queryParams.environmentNumber">
                                <el-radio class="radio" label="GJF" border>割集法</el-radio>
                                <el-radio class="radio" label="GJF" border>重解法</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Top"
                            @click="offlineTop">上一步</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

    </div>
</template>

<script setup name="Offine">
import { listEnvironment } from "@/api/factoryInfo/environment/environment";
import { listRunmodel } from "@/api/factoryInfo/runmodel/runmodel";
import { listSystem } from "@/api/factoryInfo/system1/system1";
import { listComponent } from "@/api/factoryInfo/component/component";
const { proxy } = getCurrentInstance();
import { ref } from 'vue';

/**环境因子 */
const environmentList = ref([]);
const environmentOpen = ref(true);

/**运行模式选定 */
const runmodelList = ref([]);
const runmodelOpen = ref(false);

/**设备切换 */
const systemList = ref([]);
const systemOpen = ref(false);

/**停复役 */
const componentList = ref([]);
const componentOpen = ref(false);
const xztList = ref([]);

/** 算法选择 */
const offlineOpen = ref(false);

const data = reactive({
    form: {},
    queryParams: {

    },
});
const { queryParams, form, rules } = toRefs(data);

/**环境因子 */
getEnvironmentList();
function getEnvironmentList() {
    listEnvironment({}).then(response => {
        environmentList.value = response.data;
        environmentList.value.forEach(e => {
            if (e.isRunning == 1) {
                queryParams.value.environmentNumber = e.environmentNumber;
            }
        })
    });
}

/**运行模式 */
getRunmodelList();
function getRunmodelList() {
    listRunmodel({}).then(response => {
        runmodelList.value = response.data;
        runmodelList.value.forEach(e => {
            if (e.isRunning == 1) {
                runmodelNumber.value = e.runmodelNumber;
            }
        })
    });
}

/**切换设备 */
getSystemList();
function getSystemList() {
    listSystem(queryParams.value).then(response => {
        systemList.value = response.data;
    });
}

/**停复役 */
getComponenList();
function getComponenList() {
    listComponent(queryParams.value).then(response => {
        componentList.value = response.rows;
        total.value = response.total;
    });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
    debugger
    xztList.value = selection;
}


/** 环境因子下一步 */
function environmentBottom() {
    environmentOpen.value = false;
    runmodelOpen.value = true;
}

/** 运行模式上一步 */
function runmodelTop() {
    environmentOpen.value = true;
    runmodelOpen.value = false;
}

/** 运行模式下一步 */
function runmodelBottom() {
    runmodelOpen.value = false;
    systemOpen.value = true;
}

/**设备切换下一步 */
function systemBottom() {
    systemOpen.value = false;
    componentOpen.value = true;
}

/**设备切换上一步 */
function systemTop() {
    runmodelOpen.value = true;
    systemOpen.value = false;
}


/**停复役下一步 */
function componentBottom() {
    componentOpen.value = false;
    offlineOpen.value = true;
}

/**停复役上一步 */
function componentTop() {
    componentOpen.value = false;
    systemOpen.value = true;
}

/**算法选择上一步 */
function offlineTop() {
    componentOpen.value = true;
    offlineOpen.value = false;
}

</script>


<style lang='scss' scoped>
.radio {
    margin: 20px;
}
</style>